<template>
  <div class="likeDetailContainer">
    <!-- 导航栏 -->
    <van-nav-bar
      title="团购详情"
      left-text="返回"
      left-arrow
      :border="false"
      @click-left="back"
      class="navbar"
    />
    <!-- 此商品详情 -->
    <div class="goodInfoContainer">
      <!-- 基本信息展示 -->
      <div class="goodInfo">
        <!-- 轮播图 -->
        <van-swipe @change="onChange" class="mySwipe" :autoplay="4000">
          <van-swipe-item v-for="(item, index) in imgs" :key="index"
            ><img :src="item.imgUrl" alt="获取失败"
          /></van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}</div>
            <div class="custom-text">{{ shopInfo.title }}</div>
          </template>
        </van-swipe>
        <!-- 价格和购买按钮 -->
        <div class="priceInfo">
          <!-- 价格 -->
          <div class="price">
            <!-- 现在的价格 -->
            <div class="new"><i>¥</i>{{ shopPrice.dealgroupPrice }}</div>
            <!-- 以前的价格 -->
            <div class="old">¥{{ shopPrice.marketPrice }}</div>
          </div>
          <!-- 立即购买 -->
          <button @click="toBuy">立即购买</button>
        </div>
        <!-- 退货时间 -->
        <div class="cancelTime">
          <!-- 随时可退 -->
          <div class="anytime"><i></i>随时可退</div>
          <!-- 过期自动退 -->
          <div class="overdue"><i></i>过期自动退</div>
        </div>
      </div>
      <!-- 购买通知 -->
      <div class="notice">
        <!-- 变更通知 -->
        <div class="changeNotice" v-if="shopInfo.msg">
          <h3 class="title">变更通知</h3>
          <p class="content">{{ shopInfo.msg }}</p>
        </div>
        <!-- 适用商户 -->
        <div class="fitShop">
          <h3 class="title">
            适用商户({{ shopInfo.totalShopNum }})<van-icon
              class="rightArrow"
              name="arrow"
            />
          </h3>
          <!-- 内容 -->
          <div class="content">
            <!-- 左侧信息 -->
            <div class="left">
              <!-- 商店名字 -->
              <div class="shopName">{{ shopInfo.shopName }}</div>
              <!-- 标志 -->
              <div class="shopTag">
                <!-- 评分 -->
                <div class="shopRate">
                  <van-rate allow-half :value="rate" />
                </div>
                <!-- 距离 -->
                <span class="distance">>100km</span></span>
              </div>
            </div>
            <!-- 右侧电话 -->
            <div class="right">
              <van-icon name="phone" class="phone" />
            </div>
          </div>
          <!-- 地址 -->
          <div class="address">
            <van-icon name="location" size="15" :color="'#BBBBBB'" />
            {{ shopInfo.address }}
          </div>
        </div>
        <!-- 团购详情 -->
        <div class="buyDetail">
          <h3 class="title">
            团购详情<van-icon name="column" size="17" :color="'#BBBBBB'" />
          </h3>
          <!-- 菜品标题 -->
          <h3 class="goodTitle">菜品</h3>
          <!-- 菜品详情 -->
          <div class="goodsContainer">
            <!-- 单个菜品 -->
            <div
              class="goodItem"
              v-for="(good, index) in foodList"
              :key="index"
            >
              <div class="goodName">{{ good.name }}</div>
              <div class="count">{{ good.count }}</div>
              <div class="goodPrice">{{ good.price }}</div>
            </div>
          </div>
          <!-- 应付总价格 -->
          <div class="totalPriceContainer">
            <div class="totalPriceWrap">
              <!-- 实际价格 -->
              <div class="actualPrice">
                <span class="text">最高价值</span>
                <span class="price">{{ shopPrice.marketPrice }}元</span>
              </div>
              <!-- 应付价格 -->
              <div class="payablePrice">
                <span class="text">团购价</span>
                <span class="price">{{ shopPrice.dealgroupPrice }}元</span>
              </div>
            </div>
            <div class="careful">
              <p>免费提供餐巾纸</p>
              <p>购买此单品,不与其他优惠同享!</p>
            </div>
          </div>
          <!-- 更多图文详情 -->
          <div class="more">
            <div class="text">
              更多图文详情
              <i class="remind">(建议Wifi环境下打开,土豪请随意)</i>
            </div>
            <van-icon class="rightArrow" name="arrow" />
          </div>
        </div>
        <!-- 购买须知 -->
        <div class="buyNotes">
          <h3 class="title">
            购买须知<van-icon class="volume" name="volume" />
          </h3>
          <!-- 有效期 -->
          <div class="noteItem">
            <div class="noteTitle">有效期</div>
            <div class="noteContentItem">
              <i></i><span>2017-02-16至2021-12-26</span>
            </div>
          </div>
          <!-- 除外日期 -->
          <div class="noteItem">
            <div class="noteTitle">除外日期</div>
            <div class="noteContentItem">
              <i></i><span>2020年1月23日至2020年1月29日</span>
            </div>
          </div>
          <!-- 使用时间 -->
          <div class="noteItem">
            <div class="noteTitle">使用时间</div>
            <div class="noteContentItem">
              <i></i
              ><span
                >团购券使用时间: &nbsp; &nbsp;{{ shopInfo.businessHours }}</span
              >
            </div>
          </div>
          <!-- 预约提醒 -->
          <div class="noteItem">
            <div class="noteTitle">预约提醒</div>
            <div class="noteContentItem">
              <i></i><span>无需预约,消费高峰期可能需要等位</span>
            </div>
          </div>
          <!-- 包间 -->
          <div class="noteItem">
            <div class="noteTitle">包间</div>
            <div class="noteContentItem"><i></i><span>店内无包间</span></div>
          </div>
          <!-- 堂食外带 -->
          <div class="noteItem">
            <div class="noteTitle">堂食外带</div>
            <div class="noteContentItem">
              <i></i
              ><span
                >仅限堂食,不提供餐前外带,餐毕未吃完可打包,打包费详情请咨询商家</span
              >
            </div>
          </div>
          <!-- 温馨提示 -->
          <div class="noteItem">
            <div class="noteTitle">温馨提示</div>
            <div class="noteContentItem">
              <i></i><span>团购用户不可同时享受商家其他优惠</span>
            </div>
            <div class="noteContentItem">
              <i></i><span>酒水饮料等问题,请致电商家咨询,以商家反馈为准</span>
            </div>
            <div class="noteContentItem">
              <i></i><span>使用优惠券购买团单,有效期以优惠券规则为准</span>
            </div>
          </div>
          <!-- 商家服务 -->
          <div class="noteItem">
            <div class="noteTitle">商家服务</div>
            <div class="noteContentItem">
              <i></i><span>商家提供免费WiFi</span>
            </div>
            <div class="noteContentItem">
              <i></i><span>停车位收费标准:&nbsp;&nbsp;咨询商家</span>
            </div>
          </div>
          <!-- 发票信息 -->
          <div class="noteItem">
            <div class="noteTitle">发票信息</div>
            <div class="noteContentItem">
              <i></i><span>发票问题请询问商家</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 立即购买 -->
      <button class="buy" @click="toBuy">立即购买</button>
    </div>
    <!-- 推荐商品 -->
    <div class="recommendGood">
      <div class="title">{{ shopShortName }}的其他团购</div>
      <!-- 其他团购 -->
      <div class="recommendGoodItem">
        <!-- 实付价格 -->
        <div class="actualPrice"><i>¥</i>51.8</div>
        <!-- 应付价格 -->
        <div class="payablePrice"><i>¥</i>64</div>
        <!-- 商品名字 -->
        <span class="name">国民日料·牛肉饭超值单人餐</span>
      </div>
      <div class="recommendGoodItem">
        <!-- 实付价格 -->
        <div class="actualPrice"><i>¥</i>190</div>
        <!-- 应付价格 -->
        <div class="payablePrice"><i>¥</i>200</div>
        <!-- 商品名字 -->
        <span class="name">代金券1张</span>
      </div>
      <div class="recommendGoodItem">
        <!-- 实付价格 -->
        <div class="actualPrice"><i>¥</i>95</div>
        <!-- 应付价格 -->
        <div class="payablePrice"><i>¥</i>100</div>
        <!-- 商品名字 -->
        <span class="name">代金券1张</span>
      </div>
      <!-- 还有几个团购 -->
      <div class="moreGoodItem" @click="showMoreGood" v-if="isShow">
        还有4个团购<van-icon name="arrow-down" />
      </div>
      <!-- 隐藏的团购 -->
      <div class="recommendGoodItem" v-else>
        <!-- 实付价格 -->
        <div class="actualPrice"><i>¥</i>95</div>
        <!-- 应付价格 -->
        <div class="payablePrice"><i>¥</i>100</div>
        <!-- 商品名字 -->
        <span class="name">代金券1张</span>
      </div>
    </div>
    <!-- 推荐商店 -->
    <div class="recommendShop">
      <!-- 标题 -->
      <div class="title">看了此团购的人也看了</div>
      <!-- 商店卡片 -->
      <div
        class="shopCardItem"
        v-for="(shop, index) in otherShops"
        :key="index"
      >
        <!-- 图片 -->
        <img :src="shop" />
        <!-- 信息 -->
        <div class="info">
          <!-- 商店名字 -->
          <div class="name">川成元·麻辣香锅</div>
          <!-- 价格 -->
          <div class="price">
            <div class="actualPrice"><i>¥</i>93</div>
            <div class="payablePrice"><i>¥</i>100</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="detailFooter">
      <ul>
        <li>首页</li>
        <li>|</li>
        <li>我的点评团</li>
        <li>|</li>
        <li>客户端</li>
        <li>|</li>
        <li>电脑版</li>
        <li>|</li>
        <li>大众点评团</li>
        <li>|</li>
        <li>意见反馈</li>
      </ul>
    </div>
    <!-- 下载APP -->
    <div class="download"><button>APP下单返积分抵现金</button></div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "LikeDetail",
  data() {
    return {
      // 轮播图当前页
      current: 0,
      // 还有几个团购是否显示
      isShow: true,
      // 首页传过来的ID
      shopId: "",
      // 商品的价格
      shopPrice: {
        // 团购价
        dealgroupPrice: "1",
        // 超市价格
        marketPrice: "1",
      },
      // 推荐团购的图片
      otherShops: [
        "https://p0.meituan.net/deal/f02e4fd605ba3b7f168ab0a44a17a38d45676.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20",
        "https://p0.meituan.net/deal/04c09a6bc71dccd0041abea6e54e96ec92575.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20",
        "https://p0.meituan.net/deal/04c09a6bc71dccd0041abea6e54e96ec92575.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20",
      ],
    };
  },
  // 内置路由守卫
  beforeRouteEnter: (to, from, next) => {
    const { path } = from;
    if (path === "/home" || path === "/buy") {
      next();
    } else {
      next({ ...from });
    }
  },
  mounted() {
    // 从vuex读取之前的商品信息
    const { shopId0, dealgroupPrice0, marketPrice0 } =
      this.$store.state.likeDetail.pre;
    // 获取首页传过来的id和价格信息
    let shopId;
    let id0 = this.$route.params.id;
    if (!id0) {
      if (id0 === 0) {
        shopId = 0;
      } else {
        shopId = shopId0;
      }
    } else {
      shopId = id0;
    }
    this.shopPrice = {
      dealgroupPrice: this.$route.query.dealgroupPrice || dealgroupPrice0,
      marketPrice: this.$route.query.marketPrice || marketPrice0,
    };
    // 更新数据
    this.shopId = shopId;
    // 派发请求
    this.$store.dispatch("getShopInfo", shopId);
    // 保存数据
    this.$store.dispatch("savePre", {
      shopId0: shopId,
      dealgroupPrice0: this.shopPrice.dealgroupPrice,
      marketPrice0: this.shopPrice.marketPrice,
    });
  },
  computed: {
    // 商品信息
    ...mapState({ shopInfo: (state) => state.likeDetail.shopInfo }),
    ...mapGetters(["imgs", "foodList"]),
    // 商店名
    shopShortName() {
      let { shopName } = this.shopInfo;
      shopName = shopName || "";
      const index =
        shopName.indexOf("(") > 0 ? shopName.indexOf("(") : shopName.length;
      return shopName.slice(0, index);
    },
    // 商店评分
    rate() {
      return this.shopInfo.shopPower / 10;
    },
  },
  methods: {
    //   导航栏返回
    back() {
      this.$router.push("/home");
    },
    // 轮播图
    onChange(index) {
      this.current = index;
    },
    // 显示更多团购
    showMoreGood() {
      this.isShow = false;
    },
    // 立即购买
    toBuy() {
      this.$router.push("/buy");
    },
  },
};
</script>

<style scoped lang="less">
// 猜你喜欢详情
.likeDetailContainer {
  background-color: #f0f0f0;
  i {
    font-style: normal;
  }
  h3 {
    margin: 0;
    color: #b5b5b5;
    font-size: 15px;
    font-weight: normal;
  }
  //   向右的箭头
  .rightArrow {
    font-size: 18px;
    color: #999999;
  }
  // 导航栏
  .navbar {
    background-color: #f0f0f0;
    /deep/ .van-nav-bar__left {
      padding: 0;
    }
    // 返回箭头
    /deep/ .van-nav-bar__arrow {
      font-size: 26px;
      font-weight: 700;
      margin: 0;
      color: #646464;
    }
    // 返回文字
    /deep/ .van-nav-bar__text {
      color: #000;
    }
  }
  //   商品详情
  .goodInfoContainer {
    //   基本信息展示
    .goodInfo {
      margin-bottom: 10px;
      // 轮播图
      .mySwipe {
        height: 235px;
        //   轮播图图片
        img {
          width: 100%;
          height: 235px;
        }
        // 当前图片页
        .custom-indicator {
          position: absolute;
          right: 10px;
          top: 5px;
          padding: 3px;
          padding-right: 15px;
          font-size: 12px;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 40% 40% 40% 40%;
          color: #fff;
        }
        // 商品文字
        .custom-text {
          position: absolute;
          left: 15px;
          bottom: 22px;
          font-size: 16px;
          color: #fff;
        }
      }
      //   价格信息
      .priceInfo {
        display: flex;
        justify-content: space-between;
        height: 50px;
        padding: 10px 0;
        padding-left: 15px;
        box-sizing: border-box;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        //   价格
        .price {
          display: flex;
          width: 100px;
          height: 30px;
          line-height: 30px;
          box-sizing: border-box;
          background-color: #fff;
          // 现在的价格
          .new {
            i {
              font-style: normal;
              font-size: 22px;
            }
            color: #ff6633;
            font-size: 30px;
          }
          // 以前的价格
          .old {
            margin-left: 15px;
            padding-top: 3px;
            color: #8c8c8c;
            font-size: 12px;
            text-decoration: line-through;
          }
        }
        // 立即购买
        button {
          width: 100px;
          height: 30px;
          margin-right: 10px;
          font-size: 16px;
          border-radius: 5px;
          text-align: center;
          line-height: 30px;
          outline: none;
          border: 0;
          color: #fff;
          background-color: #ff6633;
        }
      }
      //   退货时间
      .cancelTime {
        i {
          display: block;
          width: 18px;
          height: 18px;
          background-image: url("~@/static/imgs/comm.png");
          background-size: 25px auto;
          margin-right: 5px;
        }
        display: flex;
        align-items: center;
        height: 46px;
        padding-left: 15px;
        background: #fff;
        // 随时可退
        .anytime {
          display: flex;
          width: 50%;
          font-size: 14px;
          color: #666;

          i {
            background-position: 0 -275px;
          }
        }
        // 过期自动退
        .overdue {
          display: flex;
          font-size: 14px;
          color: #666;

          i {
            background-position: 0 -296px;
          }
        }
      }
    }
    // 购买通知
    .notice {
      // 变更通知
      .changeNotice {
        margin-bottom: 10px;
        padding: 15px 0 0 15px;
        background-color: #fff;
        .title {
          padding-bottom: 10px;
          border-bottom: 1px solid #f1f1f1;
        }
        .content {
          box-sizing: border-box;
          height: 100px;
          padding-right: 15px;
          font-size: 14px;
          word-break: break-all;
          color: #666;
        }
      }
      // 适用商户
      .fitShop {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-bottom: 10px;
        // 标题
        .title {
          display: flex;
          justify-content: space-between;
          margin-left: 15px;
          padding: 10px 10px 10px 0;
          color: #999999;
          border-bottom: 1px solid #f0f0f0;
          //   .rightArrow {
          //     font-size: 18px;
          //   }
        }
        // 内容
        .content {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f0f0f0;
          // 左侧信息
          .left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 60px;
            margin: 15px 0;
            padding-left: 15px;
            border-right: 1px solid #f0f0f0;
            // 商店名字
            .shopName {
              width: 270px;
              height: 16px;
              // padding-right: 30px;
              // box-sizing: border-box;
              line-height: 16px;
              font-size: 16px;
              font-weight: 700;
              color: #878787;
              // 单行文字省略
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            // 商店标识
            .shopTag {
              display: flex;
              justify-content: space-between;
              width: 290px;
              box-sizing: border-box;
              padding-right: 10px;
              // 商店评分
              .shopRate {
                // width: 100px;
                // height: 16px;
                // background-image: url("./images/rate.png");
                // background-size: 100px auto;
                // background-position: 0 -66px;
              }
              //   距离
              .distance {
                font-size: 14px;
                color: #666;
              }
            }
          }
          // 右侧电话
          .right {
            width: 68px;
            height: 85px;
            line-height: 85px;
            text-align: center;
            .phone {
              font-size: 20px;
              color: #ff6633;
            }
          }
        }
        // 地址
        .address {
          padding-left: 15px;
          height: 47px;
          line-height: 47px;
          font-size: 13px;
        }
      }
      //   团购详情
      .buyDetail {
        padding-left: 15px;
        background-color: #fff;
        margin-bottom: 10px;
        // 标题
        .title {
          padding: 10px 0;
          color: #000;
          border-bottom: 1px solid #f0f0f0;
        }
        // 菜品标题
        .goodTitle {
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-bottom: 1px solid #f0f0f0;
        }
        // 菜品
        .goodsContainer {
          // 单个菜品
          .goodItem {
            display: flex;
            justify-content: space-between;
            height: 40px;
            padding: 10px 10px 10px 0;
            box-sizing: border-box;
            font-size: 13px;
            color: #555;
            border-bottom: 1px solid #f0f0f0;
            // 菜品份数
            .count {
              margin-right: -140px;
            }
          }
        }
        // 总价格
        .totalPriceContainer {
          font-size: 15px;
          height: 145px;
          // 总价格
          .totalPriceWrap {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            height: 60px;
            margin-bottom: 20px;

            // 实际价格
            .actualPrice {
              padding: 10px 15px;
              font-size: 14px;
              color: #999999;
              text-decoration: line-through;
              span:first-child {
                margin-right: 23px;
              }
            }
            // 应付价格
            .payablePrice {
              padding-right: 5px;
              font-size: 18px;
              color: #ff6633;
              span:first-child {
                margin-right: 10px;
                font-size: 14px;
              }
            }
          }
          // 注意
          .careful {
            p {
              margin: 8px 0;
            }
            color: #878787;
            margin-left: -15px;
            padding-bottom: 10px;
            padding-left: 15px;
            border-bottom: 1px solid #f0f0f0;
          }
        }
        // 更多图文详情
        .more {
          display: flex;
          justify-content: space-between;
          height: 50px;
          line-height: 50px;
          font-size: 15px;
          .remind {
            color: #999;
            font-size: 12px;
            margin-left: 10px;
          }
          .rightArrow {
            margin: 17px 10px 10px 0;
          }
        }
      }
      //   购买须知
      .buyNotes {
        padding-left: 15px;
        background-color: #fff;
        font-size: 15px;
        padding-top: 10px;
        //   标题
        .title {
          color: #000;
          padding-bottom: 10px;
          border-bottom: 1px solid #f0f0f0;
          //   小喇叭
          .volume {
            margin-left: 10px;
            color: #999;
          }
        }
        //   须知
        .noteItem {
          border-bottom: 1px solid #f0f0f0;
          &:last-child {
            border-bottom: none;
            padding-bottom: 10px;
          }
          .noteTitle {
            font-size: 14px;
            color: #999;
            padding-top: 15px;
          }
          .noteContentItem {
            position: relative;
            margin: 15px 0;
            i {
              position: absolute;
              top: 10px;
              left: -12px;
              width: 3px;
              height: 3px;
              background-color: #666;
              border-radius: 50%;
              transform: translateY(-50%);
            }
            span {
              display: inline-block;
              width: 300px;
              color: #666;
              font-size: 15px;
            }
          }
        }
      }
    }
    // 立即购买
    .buy {
      width: 355px;
      height: 42px;
      line-height: 42px;
      background-color: #ff6633;
      border: none;
      border-radius: 5px;
      margin: 10px;
      text-align: center;
      font-size: 19px;
      color: #fff;
    }
  }
  // 推荐商品
  .recommendGood {
    background-color: #fff;
    padding-left: 15px;
    margin-bottom: 10px;
    > div {
      height: 40px;
      display: flex;
      line-height: 40px;
      font-size: 15px;
      border-bottom: 1px solid #f0f0f0;
      &:last-child {
        border-bottom: none;
      }
    }
    // 推荐商品
    .recommendGoodItem {
      // 人民币符号
      i {
        font-size: 12px;
      }
      // 实际价格
      .actualPrice {
        color: #ff6633;
        font-size: 17px;
      }
      // 应付价格
      .payablePrice {
        margin: 0 10px 0 5px;
        font-size: 12px;
        text-decoration: line-through;
        color: #666;
      }
      // 商品名字
      .name {
        font-size: 14px;
      }
    }
    // 还有几个团购
    .moreGoodItem {
      padding-left: 130px;
      line-height: 40px;
      text-align: center;
      /deep/ .van-icon {
        line-height: 40px;
        margin-left: 5px;
        color: #d4d4d4;
      }
    }
  }
  // 推荐商店
  .recommendShop {
    background-color: #fff;
    padding-left: 15px;
    // margin-bottom: 150px;
    > div {
      border-bottom: 1px solid #f0f0f0;
      &:last-child {
        border-bottom: none;
      }
    }
    // 标题
    .title {
      height: 40px;
      line-height: 40px;
      font-size: 15px;
    }
    // 推荐商店的卡片
    .shopCardItem {
      display: flex;
      align-items: center;
      height: 80px;
      padding: 0 5px;
      img {
        width: 95px;
        height: 60px;
        margin-right: 10px;
      }
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 60px;
        .name {
          font-size: 16px;
        }
        .price {
          display: flex;
          align-items: flex-end;
          i {
            font-size: 12px;
          }
          .actualPrice {
            color: #ff6633;
            margin-right: 5px;
          }
          .payablePrice {
            font-size: 12px;
            text-decoration: line-through;
            color: #666;
          }
        }
      }
    }
  }
  .detailFooter {
    position: relative;
    height: 150px;
    background-color: #f0f0f0;
    ul {
      position: absolute;
      top: 30px;
      left: 50%;
      display: flex;
      flex-wrap: wrap;
      margin-left: -108px;
      width: 215px;
      height: 50px;
      li {
        padding-right: 5px;
        font-size: 12px;
        color: #777;
        &:nth-child(even) {
          margin: 0 8px;
        }
      }
    }
  }
  // 下载APP
  .download {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    padding: 7px 10px;
    background-color: #fff;
    box-shadow: 0 -2px 6px #ccc;
    button {
      width: 353px;
      height: 100%;
      border: none;
      background-color: #ff6633;
      color: #fff;
      border-radius: 5px;
    }
  }
}
</style>